<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username">
    <input type="text" id="password">
    <script>
        var username = document.getElementById('username')
        username.addEventListener('input',function(e){//每次输入都会触发
            var p = document.createElement('p')
            //document本身的子元素有且只能有html元素，所以想要增添元素需要使用document.body
            document.body.appendChild(p)
            p.innerText = e.target.value
        })
        // username.addEventListener('select',function(){//被选中时发挥作用，没什么用
        //     alert('选中了输入框')//甚至要在输入框内有东西，然后选中内容才能触发
        // })

        var password = document.getElementById('password')
        password.addEventListener('change',function(e){
            alert(e.target.value)//change只有在enter后或输入框失去焦点时才会触发
        })
    </script>
</body>
</html>